import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    // 从本地获取商品相关数据   若没有数据 则返回空数组
    shopCarData: JSON.parse(localStorage.getItem('goodsData') || '[]')
  },
  mutations: {
    // 把商品添加到购物车
    add (state, data) {
      const index = state.shopCarData.findIndex(item => item.goodsId === data.id)
      // console.log(index)
      // 判断本地是否存储了此商品的信息 若存储了 只让他的数量增加即可
      if (index === -1) {
        state.shopCarData.push({
          goodsId: data.id,
          count: data.count
        })
      } else {
        state.shopCarData[index].count = state.shopCarData[index].count + data.count
      }

      // 然后将存储的数据保存到本地
      localStorage.setItem('goodsData', JSON.stringify(state.shopCarData))
    },
    // 把vuex里面的商品信息和购物车获取的商品信息进行数据合并
    merge (state, data) {
      const obj = data.map((item, index) => {
        // 利用展开运算符 得到两个数组里面的全部数据 并 把它们重新添加到一个对象中
        return { ...item, ...state.shopCarData[index] }
      })
      // console.log(obj)
      // 把整合的过后的数组 重新 赋值给shopCarData
      state.shopCarData = obj

      // 将shopCarData重新存储到本地
      localStorage.setItem('goodsData', JSON.stringify(state.shopCarData))
    },
    // 当用户点击步进器的+号时
    setAdd (state, id) {
      const index = state.shopCarData.findIndex(item => item.goodsId - 0 === id)
      // console.log(index)
      state.shopCarData[index].count++

      // 将最新的修改结果保存到本地存储
      localStorage.setItem('goodsData', JSON.stringify(state.shopCarData))
    },
    // 当用户点击步进器的-号时
    setRed (state, id) {
      const index = state.shopCarData.findIndex(item => item.goodsId - 0 === id)
      // console.log(index)
      state.shopCarData[index].count--

      // 将最新的修改结果保存到本地存储
      localStorage.setItem('goodsData', JSON.stringify(state.shopCarData))
    },
    // 删除商品
    del (state, id) {
      const index = state.shopCarData.findIndex(item => item.goodsId - 0 === id)
      state.shopCarData.splice(index, 1)

      // 将最新的修改结果保存到本地存储
      localStorage.setItem('goodsData', JSON.stringify(state.shopCarData))
    }
  },
  actions: {
  },
  getters: {
    // 商品总价
    totalValue (state) {
      // 如果当前没有商品的话 直接返回0
      if (state.shopCarData.length === 0) return 0
      // 计算出每个商品的价格 返回一个数组
      const jg = state.shopCarData.map(item => item.count * item.sell_price)
      // console.log(jg)
      // 然后把数组中 每一项 相加 就是 商品的总价格
      return jg.reduce((a, b) => a + b)
    }
  }
})
